<template>
  <div class="measure">
    <el-card class="box-card">
      <template #header>
        <div class="card-header flex jc-sb">
          <div>
            <span>自定义类型 / </span>
            <span>测量类型</span>
            <span>
              -
              展示所有自定义的测量类型，提供了添加测量类型、修改测量类型、删除测量类型等功能。</span
            >
          </div>
          <el-button
            class="button"
            type="primary.type"
            @click="
              show = true;
              editing = fales;
            "
            >新增</el-button
          >
        </div>
      </template>
      <el-table border :data="measure" class="card-box">
        <el-table-column
          align="center"
          prop="data"
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column align="center" prop="id" label="测量ID" width="180" />
        <el-table-column sortable align="center" prop="name" label="测量名称" />
        <el-table-column sortable align="center" prop="unit" label="测量单位" />
        <el-table-column
          align="center"
          prop="cTime"
          label="创建时间"
          :formatter="utils.fcTime"
        />
        <el-table-column
          align="center"
          prop="uTime"
          label="更新时间"
          :formatter="utils.fuTime"
        />

        <el-table-column align="center" label="操作">
          <template #default="scope">
            <!-- 编辑 -->
            <el-button
              type="primary"
              :icon="Edit"
              circle
              @click="handleEdit(scope.$index, scope.row)"
            ></el-button>
            <el-button
              :icon="Delete"
              circle
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="flex jc-c mt-20">
        <el-pagination
          @current-change="changePage"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currPage"
        />
      </div>
      <!-- 新增弹窗 -->
      <el-dialog v-model="show" title="测量类型" width="30%" center>
        <el-radio-group v-model="form" label="right"> </el-radio-group>
        <el-form
          :label-position="form"
          label-width="100px"
          :model="formLabelAlign"
          style="max-width: 460px"
        >
          <el-form-item label="名称">
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
          <el-form-item sortable label="单位">
            <el-input v-model="formLabelAlign.unit" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="getMeasureAdd">确认</el-button>
            <el-button type="primary" @click="show = false"> 取消 </el-button>
          </span>
        </template>
      </el-dialog>

      <!--  -->
    </el-card>
  </div>
</template>

<script  setup>
import { ref, onMounted, inject, reactive } from "vue";
import * as api from "../../api/index";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue"; //图标编辑
//定义弹窗状态
const show = ref(false);
//判断 点击的时候是哪个编辑还是新增
const editing = ref(false);

const form = ref("right");
//分页
const currPage = ref("");
const total = ref(0);
const pageSize = ref("7");
//自定义分页：展示的数组分页
const arr = ref([]);
const changePage = (newPage) => {
  console.log(newPage);
  currPage.value = newPage;
};

const formLabelAlign = reactive({
  name: "",
  unit: "",
  id: "",
});
const utils = inject("utils");
const measure = ref([{}]);

//请求数据
const getMeasureList = () => {
  let data = {
    currPage: currPage.value,
    pageSize: pageSize.value,
  };
  api.$measureList(data).then((res) => {
    console.log(213213, res);
    measure.value = res.data;
    // total.value = res.data.length;
    // arr.value = res.data;
    //  console.log(measure.value);
  });
};

//编辑
//接收并且解构
const handleEdit = (index, row) => {
  console.log("index", index);
  console.log("row", row);
  editing.value = true;
  show.value = true;
  formLabelAlign.name = row.name;
  formLabelAlign.unit = row.unit;
  formLabelAlign.id = row.id;
  formLabelAlign.index = index;
};

//删除+弹窗

const handleDelete = (index, row) => {
  console.log("2index", index);
  console.log("ro2", row);
  console.log(123, row.id);
  ElMessageBox.confirm("确认删除吗", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let data = {
      id: row.id,
    };
    api.$measureDel(data).then((res) => {
      console.log(res);
      measure.value.splice(index, 1);
      ElMessage({
        type: "success",
        message: "删除成功",
      });
    });
  });
};

//获取测量数据
const getMeasureAdd = () => {
  //编辑true
  if (editing.value) {
    //编辑需要id
    let data = {
      id: formLabelAlign.id,
      name: formLabelAlign.name,
      unit: formLabelAlign.unit,
    };
    api.$measureEdit(data).then((res) => {
      console.log(res);
      show.value = false;
      // getMeasureList();
      let index = formLabelAlign.index;
      measure.value[index].unit = formLabelAlign.unit;
      measure.value[index].name = formLabelAlign.name;
      ElMessage({
        type: "successDS",
        message: "编辑成功",
      });
    });
  } else {
    //为false时是新增
    let data = {
      name: formLabelAlign.name,
      unit: formLabelAlign.unit,
    };
    api.$measureAdd(data).then((res) => {
      console.log("213", res);
      measure.value.unshift(res.data);
      show.value = false;
      formLabelAlign.name = "";
      formLabelAlign.unit = "";
    });
  }
};

onMounted(() => {
  getMeasureList();
});
</script>

<style lang="less" scoped>
.measure {
  .box-card {
    // border: 20px solid #ebeef2;
    width: 99%;
  }
  .el-card__body {
    padding: 5px;
    background-color: #efeef2;
  }
}
</style>
